Webpages

Using your already existing webpages is an excellent way of adding dynamic and relevant content to your screens and the webpage wizard can help you to you achieve the best results possible.

Quick Guide

1. Input the full URL, that you would like to show
2. Select the playback mode
3. Make any additional settings required
4. Finish the wizard

See below for detailed explanations of each available configuration step.

Add webpage

This is the first step where you input the URL, the address, to the webpage that you want to show.

Name

• Give the URL a more user-friedly name (optional)

URL

• Input your URL including protocol, for example https://www.smartsign.se

When you go to next step, you will see a preview of the website where you can select playback mode.

Action bar
The action bar allows you to preview and see the changes you make for the website.

• Preview URL
  • Click Preview to see how the webpage will look on the screen.
• Move
  • Save the website settings in media library for later use
• Delete
  • Use if you want to remove the media file
• Refresh
  • Request a new snapshot using configured settings.
• Crop webpage
  • Crop the webpage when using Snapshot. Read more below.

Playback mode

There are two playback modes you can select.

Live

• The webpage will be shown live, using the built-in web browser of the device.
• Screens may have limitations depending on the website you want to show.
• Advanced features are generally only supported by the Smartsign Windows Player.

Snapshot

• The webpage will be shown as a static image. The image will be updated at a specified interval and it can be cropped if desired.
• Snapshot works with any screen or player as the Smartsign server is responsible to feed the snapshots to the devices.
• Read more about advanced features below.

Advanced URL settings

Enable this to enable more advanced features such as login and custom request headers.

Please note that these features are only supported as follows:
Snapshot: All devices
Live: Smartsign Windows Player (with the setting Use external WebView enabled, see admin guide (Live login) for requirements and technical details.)

Additional settings

Snapshot Refresh Interval

Input the time interval between snapshots. (Use 'h' for hours, 'm' for minutes and 's' for seconds)

Please note that there may be a limit configured on the server overriding this setting if it is set to low. Note that the minimum value actually used is controlled by the server configuration.

Snapshot delay

Input the time to wait before taking the snapshot, the timer starts when the page has completed loading.

Custom request headers

Custom request headers can be used to provide static authentication headers and other application specific headers to make a webpage respond as desired.

warning

These settings are only valid for Snapshot, or Live on Windows Player 10.8+.

Use custom request headers
Enable this to use custom request headers, as supplied by you, when loading the URL.

Custom request headers
Check Use custom request headers to show this setting.
Input your custom headers here. Each one must have a key and a corresponding value.

Cookies

Cookies can be used to provide session management data and user preferences in order to show the relevant content on the webpage.

warning

These settings are only valid for Snapshot, or Live on Windows Player 10.21.4+.

Use cookies
Enable this to use cookies, as supplied by you, when loading the URL.

Cookies Check Use cookies to show this setting.
Input your cookies here. Each one must have a name, a value, and a corresponding domain.

Preview
Click Preview url to request a preview snapshot using the cookies/headers that you have configured.

Login

If the webpage requires a login, Smartsign can attempt to login before loading the page. Where to input the username and password can often be auto detected, but it can be specified if needed.

warning

• These settings are only valid for Snapshot, or Live on Windows Player 10.8+.

• Being able to perform login is very much dependent on the 3rd party webpage that you are trying to login to and every page is different.
  While we strive to be as compatible as possible in this regard, we cannot provide any guarantees that it will work. Also, if it does work, we cannot guarantee that it will continue doing so.

Login page
Input the URL to the login page including protocol. It's commonly a different URL from the one you want to show on screen, but it can be the same too.

Example: https://login.microsoftonline.com (for Microsoft 365/Power BI)

Username
Input the username that should be used to login.

Password
Input the password that should be used to login.

Show advanced login settings

Enable this setting if you want to specify additional details for the login attempt.

Some example CSS-selectors:

Type	HTML	CSS Selector
Id	<input id="Uname" />	#Uname
Attribute	<input name="Uname" />	[name=Uname]
Class	<input class="User-Input" />	.User-Input

Username CSS-selector
Input a CSS-selector for the Username input element on the login page. If not found, auto detect will be tried.

Password CSS-selector
Input a CSS-selector for the Password input element on the login page. If not found, auto detect will be tried.

Submit button CSS-selector
Input a CSS-selector for the Submit button element on the login page. If not found, auto detect will be tried.

Custom CSS-selector
Input a CSS-selector for a Custom input element on the login page. (optional)

Custom Input Value
Input a value that should be entered in the custom input element identified by the Custom CSS-selector.

Crop snapshot
Enable if you want to crop the webpage snapshot. Once enabled a full page snapshot will be taken to detect the size of the webpage. When it's ready, click and drag to select the area that you would like to cut out. The coordinates for your selection will show in the input for each and can be adjusted manually if needed.

To adjust the size of the original snapshot, adjust the Webpage width and height and then click Refresh snapshot.

Webpage
Specifies the width and height of the browser's viewport when taking the snapshot.

Cut out
Specifies the position and size of the cut out in pixels.